<script setup>
import { onShow, onHide } from '@dcloudio/uni-app'
import { ref, reactive, computed, onMounted } from 'vue'
import { getStreetTypeAPI, merchantListAPI } from '@/api/street'
const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)

const merchantForm = reactive({
  merchantName: '',
  merchantType: '',
  streetId: '',
})
const tabIndex = ref(0)
const tabData = ref([])
const getTabs = async () => {
  const res = await getStreetTypeAPI()
  tabData.value = res.data
  merchantForm.merchantType = res.data[0]['id']
}

const popupRef = ref(null)
const popupOpen = () => {
  popupRef.value.open()
  merchantList()
}

// 获取商户列表
const merchantData = ref([])
const merchantList = async () => {
  const res = await merchantListAPI(merchantForm)
  merchantData.value = res.data
}

// 地图上所展示的街区
const positionList = ref([])
const selectedBuild = (item, list) => {
  // console.log(item, list, '22===')
  positionList.value = list
  merchantForm.streetId = item.id
  activeLi.value = list.findIndex((it) => it.id == item.id)
  popupOpen()
}

// popup组件中类型切换
const setTab = (item, index) => {
  tabIndex.value = index
  console.log(item, index, '32===')
  merchantForm.merchantType = item.id
  merchantList()
}

// 顶部类型切换
const tabChange = (data) => {
  tabIndex.value = data
  merchantForm.merchantType = tabData.value[data]['id']
}

// 左侧街区切换
const activeLi = ref(0)
const positionChange = (item, index) => {
  activeLi.value = index
  console.log(item, index, '39===')
  merchantForm.streetId = item.id
  merchantList()
}

// onShow(() => {
//   // 每次页面显示时，可以执行一些逻辑
//   console.log('页面显示')
// })

onHide(() => {
  // 每次页面隐藏时，可以执行一些逻辑
  popupRef.value.close()
})

onMounted(() => {
  getTabs()
})
</script>

<template>
  <view class="dd-container">
    <fes-tabs
      @change="tabChange"
      :data="tabData"
      type="btn"
      class="tabs"
    ></fes-tabs>
    <fes-drag @change="selectedBuild"></fes-drag>
    <!-- 底部弹窗 -->
    <uni-popup
      :safe-area="false"
      ref="popupRef"
      type="bottom"
      background-color="#fff"
      borderRadius="60rpx 60rpx 0 0"
      @change="change"
    >
      <view class="popup-content">
        <view class="header">
          <view class="search">
            <input
              class="uni-input"
              v-model="merchantForm.merchantName"
              placeholder="请输入商铺名称"
            />
            <view @click="merchantList" class="btn">搜索</view>
          </view>
          <view class="popup-tabs">
            <view
              class="popup-tab"
              :class="tabIndex == index ? 'active-tab' : ''"
              v-for="(item, index) in tabData"
              :key="index"
              @click="setTab(item, index)"
              >{{ item.typeName }}
              <view class="line"></view>
            </view>
          </view>
        </view>
        <view class="popup-body">
          <scroll-view class="body-left" scroll-y="true">
            <view
              class="li limit"
              :class="activeLi == index ? 'active-li' : ''"
              v-for="(item, index) in positionList"
              :key="index"
              @click="positionChange(item, index)"
            >
              {{ item.streetName }}
            </view>
          </scroll-view>
          <scroll-view class="body-right" scroll-y="true">
            <view class="item" v-for="(it, idx) in merchantData" :key="idx">
              <image
                class="item-img"
                :src="`${IMAGE_URL}${it.merchantCover}`"
                mode="aspectFill"
              />
              <view class="item-right">
                <view class="title limit">{{ it.merchantName }}</view>
                <view class="desc limit3">{{ it.merchantDescrip }}</view>
              </view>
            </view>
            <!-- 暂无数据 -->
            <no-data v-if="merchantData.length == 0" />
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
.dd-container {
  position: relative;
  .tabs {
    position: absolute;
    z-index: 99;
    width: 100%;
    top: 60rpx;
    left: 50%;
    transform: translate(-50%);
  }
}
.popup-content {
  border-radius: 60rpx 60rpx 0 0;
  background: #f5f5f5;
  overflow: hidden;
  .header {
    padding: 60rpx 60rpx 20rpx;
    background: #ffffff;
    box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.2);
    .search {
      display: flex;
      align-items: center;
      margin-bottom: 34rpx;
      .uni-input {
        flex: 1;
        margin-right: 20rpx;
        height: 66rpx;
        border-radius: 6rpx;
        background: #ededed;
        padding: 0 24rpx;
      }
      .btn {
        flex-shrink: 0;
        padding: 16rpx 24rpx;
        border-radius: 8rpx;
        background: #ea5404;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .popup-tabs {
      display: flex;
      align-items: center;
      .popup-tab {
        cursor: pointer;
        flex: 1;
        border-right: 1px solid #d9d9d9;
        font-size: 24rpx;
        font-weight: 400;
        color: #666666;
        text-align: center;
      }

      .popup-tab:last-child {
        border-right: none;
      }

      .active-tab {
        position: relative;
        font-size: 28rpx;
        font-weight: 500;
        color: #e66363;
        .line {
          position: absolute;
          left: 50%;
          bottom: -20rpx;
          transform: translateX(-50%);
          width: 52rpx;
          height: 4rpx;
          background: #e66363;
        }
      }
    }
  }

  .popup-body {
    display: flex;
    .body-left {
      width: 200rpx;
      height: 680rpx;
      padding: 30rpx 0;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.1);
      .li {
        cursor: pointer;
        text-align: center;
        font-size: 24rpx;
        font-weight: 400;
        margin-bottom: 36rpx;
      }
      .active-li {
        font-size: 28rpx;
        color: #e66363;
      }
    }
    .body-right {
      flex: 1;
      padding: 30rpx;
      height: 680rpx;
      display: flex;
      align-items: center;
      .item {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
      }
      .item-img {
        flex-shrink: 0;
        width: 230rpx;
        height: 156rpx;
        border-radius: 10rpx;
        margin-right: 24rpx;
      }
      .item-right {
        .title {
          color: #333333;
          font-size: 28rpx;
          font-weight: 500;
        }
        .desc {
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
